<template>
	<view>
		<!--<import src="../../../lib/area/area.wxml"></import>-->
		<uni-nav-bar title="编辑收货地址" left-icon="back"  fixed="true" color="#353535" backgroundColor="#fff" @clickLeft="goback"></uni-nav-bar>
		<view class="add-address">
			<view class="add-form">
				<view class="form-item">
					<view class="input_title">收货人</view>
					<input class="input" @input="bindinputName" placeholder="请输入收货人姓名" :value="address.name" auto-focus></input>
				</view>
				<view class="form-item">
					<view class="input_title">手机号码</view>
					<input class="input" @input="bindinputMobile" @blur="phonecheck" :value="address.phoneNumber" placeholder="请输入收货人手机号码"></input>
				</view>
				<view class="form-item">
					<view class="input_title">所在地区</view>
					<input class="input" :value="address.province+address.city+address.region" disabled="true" @tap="translate"
					 placeholder="请选择"></input>
					<image class="address_img" src="/static/static/images/address_right.png"></image>
				</view>
				<view class="form-item address_more">
					<view class="input_title">详细地址</view>
					<input class="input" @input="bindinputAddress" :value="address.detailAddress" placeholder="请输入街道门牌信息"></input>
				</view>
				<view class="form-default">
					<text class="defalt-text">设置为默认地址</text>
					<image @tap.stop="bindIsDefault" v-if="address.defaultStatus == 0" class="default-img" src="/static/static/images/check.png"></image>
					<image @tap.stop="bindIsDefault" v-if="address.defaultStatus == 1" class="default-img" src="/static/static/images/checked.png"></image>
				</view>
				<view class="btns">
					<button class="save" @tap="saveAddress">保存</button>
				</view>
			</view>
		</view>
		<linkAddress ref="linkAddress" :height="height" @confirmCallback="confirmCallback"></linkAddress>
	</view>
</template>

<script>
	import util from '../../../utils/util.js';
	import api from '../../../config/api.js';
	import linkAddress from '../../../components/area/xuan-linkAddress.vue';
	import checkinput from "../../../lib/checkinput.js";
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	
	var app = getApp();
	var item = {};

	export default {
		data() {
			return {
				height: '500px',
				address: {
					id: 0,
					province_id: 0,
					province: '',
					city_id: 0,
					city: '',
					region_id: 0,
					region: '',
					detailAddress: '',
					full_region: '',
					name: '',
					phoneNumber: '',
					defaultStatus: 0
				},
				addressId: 0
			};
		},

		components: {
			linkAddress,
			uniNavBar
		},
		props: {},
		onShareAppMessage: function(res) {
			return {
				title: '琅琊严选',
				path: '/pages/index/index'
			};
		},
		onLoad: function(options) {
			// 页面初始化 options为页面跳转所带来的参数
			console.log(options);

			if (options.id) {
				this.setData({
					addressId: options.id
				});
				this.getAddressDetail();
			} 
		},
		onReady: function(e) {
			var that = this;
		},
		methods: {
			goback(){
				uni.navigateBack()
			},
			phonecheck(e){
				let that = this;
				let phone;
				if(e.detail.value){
					phone = e.detail.value
				}else{
					phone = that.address.phoneNumber
				}
				if(!checkinput.checkPhone(phone)){
					uni.showModal({
						title:'格式不正确'
					})
				}
			},
			phonecheck(){
				let that = this;
				let phone = that.address.phoneNumber;
				if(!checkinput.checkPhone(phone)){
					uni.showModal({
						title:'格式不正确'
					})
				}
				return checkinput.checkPhone(phone);
			},
			bindinputMobile(event) {
				let address = this.address;
				address.phoneNumber = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindinputName(event) {
				let address = this.address;
				address.name = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindinputAddress(event) {
				let address = this.address;
				address.detailAddress = event.detail.value;
				this.setData({
					address: address
				});
			},

			bindIsDefault() {
				let address = this.address;
				address.defaultStatus = !address.defaultStatus ? 1 : 0;
				this.setData({
					address: address
				});
			},

			getAddressDetail() {
				let that = this;
				util.request(api.AddressDetail, {
					id: that.addressId
				}).then(function(res) {
					if (res.errno == 0) {
						that.setData({
							address: res.data
						});
					}
				});
			},

			//点击选择城市按钮显示picker-view
			translate: function(e) {
				this.height = '550rpx';
				//显示
				this.show_popup();
			},
			//显示弹窗
			show_popup: function() {
				this.$refs.linkAddress.show();
			},
			//回掉
			confirmCallback: function(data) {
				// console.log("confirmCallback"+JSON.stringify(data))
				let address = this.address; // let selectRegionList = this.data.selectRegionList;
				
				address.province_id = data.province.id;
				address.city_id = data.city.id;
				address.region_id = data.district.id;
				address.province = data.province.name;
				address.city = data.city.name;
				address.region = data.district.name;
				this.setData({
					address: address
				});
			},

			cancelAddress() {
				uni.reLaunch({
					url: '/pages/shopping/address/address'
				});
			},

			saveAddress() {
				console.log(this.address);
				let address = this.address;

				if (address.name == '') {
					util.showErrorToast('请输入姓名');
					return false;
				}

				if (address.phoneNumber == '') {
					util.showErrorToast('请输入手机号码');
					return false;
				}

				if (address.region_id == 0) {
					util.showErrorToast('请输入省市区');
					return false;
				}

				if (address.address == '') {
					util.showErrorToast('请输入详细地址');
					return false;
				}

				let that = this;
				util.request(api.AddressSave, {
					id: address.id,
					name: address.name,
					phoneNumber: address.phoneNumber,
					province: address.province,
					city: address.city,
					region: address.region,
					detailAddress: address.detailAddress,
					defaultStatus: address.defaultStatus
				}, 'POST').then(function(res) {
					if (res.errno == 0) {
						// wx.reLaunch({
						//   url: '/pages/shopping/address/address',
						// })
						uni.navigateBack({
							delta: 0
						});
					}
				});
			}

		}
	};
</script>
<style>
	page {
		position: relative;
		height: 100%;
		background: #fff;
	}

	.add-address {
		background: #f1f1f1;
		height: 100%;
	}

	.add-address .add-form {
		/* position: absolute; */
		margin-top: 20rpx;
		background: #fff;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.add-address .form-item {
		height: 100rpx;
		padding-left: 30rpx;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		font-size: 28rpx;
	}

	.add-address .input_title {
		width: 142rpx;
	}

	.add-address .address_img {
		height: 28rpx;
		width: 28rpx;
	}

	.add-address .input {
		flex: 1;
		overflow: hidden;
	}

	.add-address .address_more {
		height: 140rpx;
		padding-top: 36rpx;
		padding-bottom: 76rpx;
	}

	.add-address .form-default {
		display: flex;
		justify-content: space-between;
		height: 120rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
		padding-left: 30rpx;
		border-top: 20rpx solid #f1f1f1;
	}

	.default-img {
		margin-top: 35rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.default-input {
		width: 28rpx;
		height: 100rpx;
		padding-left: 0rpx;
		line-height: 100rpx;
		background-size: 28rpx 28rpx;
		font-size: 28rpx;
	}

	.default-input.selected {
		background-size: 28rpx 28rpx;
	}

	.add-address .btns {
		background-color: #f1f1f1;
		bottom: 0;
		left: 0;
		overflow: hidden;
		display: flex;
		width: 100%;
		height: 60%;
	}

	.add-address .save {
		margin-top: 80rpx;
		height: 80rpx;
		width: 640rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		border: none;
		border-radius: 40rpx;
	}


	.add-address .save {
		background: #b28850;
	}
</style>
